// 左侧导航栏
#nav {
    z-index: 999;
    position: fixed;
    padding: 5px 10px;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    background-color: #000;

    .nav-bd {
        border-bottom: salmon 1px solid;

        .user {
            display: block;
        }

        .loginbtn {
            display: block;
        }

        li a {
            display: block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            color: #fff;
            font-size: 20px;
        }

        li a:hover {
            background-color: #2E3034;
        }

        li a::before {
            font-family: "iconfont";
            margin: 0 10px;
            vertical-align: middle;
            font-size: 26px;
        }

        li:nth-child(1) i {
            float: left;
            overflow: hidden;
            margin: 15px 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;

            img {
                vertical-align: top;
                width: 100%;
            }
        }

        li:nth-child(2) a::before {
            color: rgb(136, 148, 159);
            content: '\e741';
        }

        li:nth-child(3) a::before {
            color: rgb(136, 148, 159);
            content: '\e77c';
        }

        li:nth-child(4) a::before {
            color:#F5B4C0;
            content: '\e79d';
        }

        li:nth-child(5) a::before {
            color:#8BCCC5;
            content: '\e765';
        }

        li:nth-child(6) a::before {
            color: #7E86D0;
            content: '\e74d';
        }
    }

}
// 默认欢迎页
#main {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;

    >h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        color: burlywood;
    }
}


//我的一天
#myday,#important,#plan,#task{
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
}
#myday{
        .myday-title{
        color:#fff;
        div{
            padding: 0px 30px;
            h1{
                font-size: 35px;
            }
            p{
                margin: 5px 0;
                font-size: 20px;
            }
        }
    }
}
#important{
    background-color: #F5B4C0;
    .important-title{
        color:#fff;
        padding: 0px 30px;
        h1{
            font-size: 35px;
        }
        h1::after{
            font-family: 'iconfont';
            content: '\e79d';
        }
    }
}
#plan{
    background-color: #8BCCC5;
    .plan-title{
        color:#fff;
        padding: 0px 30px;
        h1{
            font-size: 35px;
        }
        h1::after{
            font-family: 'iconfont';
            content: '\e765';
        }
    }
}
#task{
    background-color: #7E86D0;
    .task-title{
        color:#fff;
        padding: 0px 30px;
        h1{
            font-size: 35px;
        }
        h1::after{
            font-family: 'iconfont';
            content: '\e74d';
        }
    }
}

// 登录注册模态框
.user-login-register{
    .login,.register{
        display: none;
        z-index: 9999999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 0 10px 2px rgba(0,0,0,.3);
        h4{
            position: absolute;
            top: 10px;
            left: 0;
            width: 100%;
            height: 40px;
            font-size: 25px;
            line-height: 40px;
            text-align: center;
        }
        .close{
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .login-register-bd{
            position: absolute;
            top: 90px;
            left: 0;
            width: 100%;
            .input-item-error{
                position: absolute;
                top: 100%;
                left: 0;
                font-size: 14px;
                color: red;
            }
            .input-item{
                position: relative;
                margin: 25px 0 25px 130px ;
            }
            label{
                float: left;
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border: 1px solid#DCDFE6;
                border-right: none;
                font-size: 40px;
            }
            input{
                float: left;
                width: 300px;
                height: 40px;
                padding-left: 10px;
                font-size: 20px;
                border: 1px solid #DCDFE6;
                font-weight: lighter;
            }
            .submit{
                display: block;
                width: 340px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                background-color:#19B955;
            }
        }
        .login-register-link{
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 50px;
            line-height: 40px;
            padding-top: 10px;
            color: #bbb;
            span:first-child{
                float: left;
                margin-left: 20px;
            }
            span:last-child{
                float: right;
                margin-right: 20px;
            }
        }
    }
    .login{
        width: 600px;
        height: 400px;
    }
    .register{
        width: 600px;
        height: 600px;
    }
    .mask{
        display: none;
        z-index: 9999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.2);
    }
}


